<template>
  <div class="card">
      <div class="ibanner"></div>
      <div class="i-info">
          <img src="../assets/card/title.png" alt="">
        <i-service></i-service>
      </div>
      <div class="card-introduce">
          <div class="pc-carousel">
              <el-carousel :interval="2000" type="card" indicator-position="none" height="4.13rem">
                  <el-carousel-item >
                      <img src="../assets/card/cardgreen.png" alt="">
                  </el-carousel-item>
                  <el-carousel-item >
                      <img src="../assets/card/cardpurple.png" alt="">
                  </el-carousel-item>
                  <el-carousel-item >
                      <img src="../assets/card/cardblue.png" alt="">
                  </el-carousel-item>
              </el-carousel>
          </div>
          <div class="mb-carousel">
              <el-carousel :interval="2000" type="card" indicator-position="none" height="2.5rem">
                  <el-carousel-item >
                      <img src="../assets/card/cardgreen.png" alt="">
                  </el-carousel-item>
                  <el-carousel-item >
                      <img src="../assets/card/cardpurple.png" alt="">
                  </el-carousel-item>
                  <el-carousel-item >
                      <img src="../assets/card/cardblue.png" alt="">
                  </el-carousel-item>
              </el-carousel>
          </div>
          <div class="content clearfix">
              <div class="icon-box fl icon-box-pc">
                  <img src="../assets/card/code.png" alt="">
                  <p>官方微信平台</p>
              </div>
              <ol class="texts fl">
                  <li>1.本卡仅限集分卡专属会员内部使用，可供移动、电信、联通三网及中石化用户兑换话费   流量及加油充值服务，详情可扫码关注微信</li>
                  <li>2.本卡不记名、不挂失，并严禁倒卖，如违反规定，本公司有权终止本卡使用权；</li>
                  <li>3.请在有效期限截止日期前使用，有效截止日期：2019年3月1日</li>
                  <li>4.请避开系统维护期使用（每日22:00-次日02:00）；如遇服务高峰期（月初和月末会有延迟，请耐心等待；</li>
                  <li>5.客户服务热线：0571-86572999，客户服务时间：周一至周五9:00-18:00。</li>
              </ol>
          </div>
          <div class="to-use">
              <h3>使用流程</h3>
              <div class="progress">
                  <img src="../assets/card/progress.png" alt="">
              </div>
          </div>
      </div>
      <div class="space">
          <div class="icon-box fl icon-box-mb">
              <img src="../assets/card/code.png" alt="">
              <p>官方微信平台</p>
          </div>
      </div>
  </div>
</template>
<script>
    import iService from '../components/service.vue';
    export default {
        components:{
            'i-service':iService,
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less" scoped>
    .ibanner{background: url(../assets/card/cardbanner.png) center no-repeat;background-size: cover;}
    .el-carousel{
        margin: .5rem auto;
        max-width: 1200px;
        img{width: 100%}
    }
    .pc-carousel  .el-carousel__item{line-height: 4.13rem;}
    .mb-carousel .el-carousel__item{line-height: 2.5rem;}
    .card-introduce button{border-radius: 0;}

</style>
